<template>
  <div class="profile-container">
    <h2>个人资料</h2>

    <el-form ref="profileFormRef" :model="profileForm" :rules="profileRules" label-width="100px" class="profile-form">
      <el-form-item label="头像">
        <el-upload class="avatar-uploader" name="image" action="http://localhost:8080/user/upload"
          :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :on-error="handleAvatarError">
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>

      <el-form-item label="用户名">
        <el-input v-model="profileForm.username" disabled />
      </el-form-item>

      <el-form-item label="用户昵称" prop="nickname">
        <el-input v-model="profileForm.nickname" placeholder="请输入用户昵称" />
      </el-form-item>

      <el-form-item label="邮箱" prop="email">
        <el-input v-model="profileForm.email" placeholder="请输入邮箱" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="handleSave" :loading="loading">
          保存修改
        </el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'
import type { UploadProps } from 'element-plus'
const userStore = useUserStore()
const profileFormRef = ref()
const loading = ref(false)

const profileForm = reactive({
  username: '',
  nickname: '',
  email: '',
  bio: '',
  avatar: '',
  image:''
})

const imageUrl = ref('')

const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  console.log('头像上传成功:', response)
  imageUrl.value = response.data
  profileForm.avatar = imageUrl.value
  ElMessage.success('头像上传成功')
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}
// 头像上传失败处理
const handleAvatarError: UploadProps['onError'] = (error, file) => {
  console.error('头像上传失败:', error)
  ElMessage.error('头像上传失败，请重试')
}

const profileRules = {
  nickname: [
    { required: true, message: '请输入用户昵称', trigger: 'blur' },
    { min: 2, max: 20, message: '昵称长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email' as const, message: '请输入正确的邮箱格式', trigger: 'blur' }
  ]
}

const loadUserProfile = () => {
  if (userStore.user) {
    profileForm.username = userStore.user.username || ''
    profileForm.nickname = userStore.user.nickname || ''
    profileForm.email = userStore.user.email || ''
    //profileForm.bio = userStore.user.bio || ''
    profileForm.avatar = userStore.user.avatar || ''
    // 初始化头像显示
    //imageUrl.value = userStore.user.avatar || ''
  }
}

const handleSave = async () => {
  try {
    await profileFormRef.value.validate()
    loading.value = true

    await userStore.updateUserInfo({
      nickname: profileForm.nickname,
      email: profileForm.email,
      avatar: profileForm.avatar
    })

    ElMessage.success('保存成功')
  } catch (error: any) {
    ElMessage.error(error.message || '保存失败')
  } finally {
    loading.value = false
  }
}

const handleReset = () => {
  profileForm.nickname = ''
  profileForm.email = ''
  profileForm.avatar = ''

}

onMounted(() => {
  loadUserProfile()
})
</script>

<style scoped lang="scss">
.profile-container {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  max-width: 800px;
  margin: 0 auto;

  h2 {
    margin-bottom: 30px;
    color: #2c3e50;
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      bottom: -8px;
      left: 50%;
      transform: translateX(-50%);
      width: 40px;
      height: 3px;
      background: linear-gradient(90deg, #ff6b35, #f7931e);
      border-radius: 2px;
    }
  }
}

.profile-form {
  max-width: 600px;
  margin: 0 auto;
}

.avatar-uploader {
  text-align: center;

  .avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #d9d9d9;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      border-color: #ff6b35;
      transform: scale(1.05);
    }
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    border: 2px dashed #d9d9d9;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      border-color: #ff6b35;
      color: #ff6b35;
    }
  }
}

:deep(.el-form-item__label) {
  font-weight: 500;
  color: #2c3e50;
}

:deep(.el-input__wrapper) {
  border-radius: 8px;

  &.is-focus {
    box-shadow: 0 0 0 1px #ff6b35;
  }
}

:deep(.el-button--primary) {
  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
  border: none;
  border-radius: 8px;
  padding: 12px 30px;
  font-weight: 500;

  &:hover {
    background: linear-gradient(135deg, #e55a2b 0%, #e0851a 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
  }
}

:deep(.el-button) {
  border-radius: 8px;
  padding: 12px 30px;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .profile-container {
    padding: 20px;
    margin: 10px;

    h2 {
      font-size: 20px;
    }
  }

  .profile-form {
    max-width: 100%;
  }
}
</style>
